<template>
	<view class="goods">
		<!-- 导航栏 -->
		<nav-bars ref="navBar" :scrollTop="scrollTop" transparentFixedFontColor="#FFF" type="transparentFixed"
			:title="titleText"></nav-bars>

		<!-- 商品轮播图 -->
		<view class="g_banner">
			<view class="i_tBtn" @click="dviewr()" v-if="cool_show">
				<view class="i_tbImg">
					<image src="@/static/home/3d.png"></image>
				</view>
				<view class="i_tbTxt">3D</view>
			</view>
			<swiper @change="changeBanner">
				<swiper-item v-for="(item, index) in goodsInfo.round_imgs" :key="index"
					@click="preview(index, goodsInfo.round_imgs)">
					<image :src="item.image_path"></image>
				</swiper-item>
			</swiper>
			<view class="g_bDots">
				<view class="g_bDot" :class="{ active: bannerIndex === index }"
					v-for="(item, index) in goodsInfo.round_imgs" :key="index">
					<view class="g_bIcon"></view>
				</view>
			</view>
		</view>
		<!-- 价格卡片组 -->
		<sh-price-card v-if="goodsInfo" :detail="goodsInfo" :type="goodsInfo.activity_type" @change="getActivityRules">
		</sh-price-card>
		<!-- 商品基础信息 -->
		<view class="GoodsMessage">
			<view class="GoodsView">
				<view class="GoodsPrice">
					<view class="GoodsPriceView">
						<text class="GoodsSymbol">¥</text>
						<text class="GoodsNum">{{ goodsInfo.activity_price}}</text>
					</view>
					<view class="GoodsBuyNum">{{ goodsInfo.volume}}人付款</view>
				</view>
				<view class="GoodsTool">
					<view class="GoodsShare" @click="gitis_show_model()">
						<view class="iconfont icon-share"></view>
						<view class="GoodsShareText">分享</view>
					</view>
					<view class="GoodsLike" @click="focusStore">
						<view class="iconfont iconhuaban117" v-if="product_follow_status == 1"></view>
						<view class="iconfont iconhuaban161" v-else></view>
						<view class="GoodsLikeText">收藏</view>
					</view>
				</view>
			</view>
			<view class="GoodsTitle">{{ goodsInfo.product_title }}</view>
		</view>

		<!-- 其他 -->
		<view class="g_it">
			<view class="g_iGroup">
				<!-- <view class="g_iItem">
					<view class="g_iLabel">优惠</view>
					<view class="g_iCont" @click="receive">
						<view class="g_iIcon"><image src="/static/common/icon_more.png"></image></view>
						<view class="g_iTxt">优惠券</view>
					</view>
				</view> -->
				<view class="g_iItem">
					<view class="g_iLabel">活动</view>
					<view class="g_iCont">
						<view class="g_iIcon">
							<image src="/static/common/icon_more.png"></image>
						</view>
						<view class="g_iTxt">家居节</view>
					</view>
				</view>
			</view>
			<view class="row-collage" v-if="groupList.length>0">
				<view class="column">
					<view class="column-title">
						{{groupList.length}}人正在拼团,可直接参与
					</view>
					<view class="right-more" @click="pintuanShow">
						查看更多
						<view class="iconfont icon-more"></view>
					</view>
				</view>
				<view class="pintuan">
					<view class="list" v-for="(item,index) in groupList" :key="index" v-if="index<=2">
						<view  class="list" v-if="formatToHours(item.pay_time)!='拼团已结束'">
						<view class="sidebar_a">
							<image :src="item.headimg"></image>
							<text>{{item.nickname}}</text>
						</view>
						<view class="sidebar_b">
							<text>还差
								<text style="color: #E9423E;">{{item.diff_people}}人</text>
								拼成
							</text>
							<text>{{formatToHours(item.pay_time)}}</text>
						</view>
						<view class="sidebar_right" @click="buy(2,item.team_id)">
							去拼单
						</view>
					</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 服务 -->
		<!-- <sh-serve v-model="showServe" :serveList="service"></sh-serve> -->
		<!-- 拼团人-->
		<!-- <sh-groupon  :grouponData="goodsInfo"></sh-groupon> 无此文件-->
		<!-- v-if="goodsInfo.specs_type" -->
		<view class="g_it">
			<view class="g_iGroup">
				<view class="g_iItem">
					<view class="g_iLabel">选择</view>
					<view class="g_iCont" @tap="showSizePop(goodsInfo.specs_type)">
						<view class="g_iIcon">
							<image src="/static/common/icon_more.png"></image>
						</view>
						<view class="g_iTxt">规格分类</view>
						<template v-if="goodsInfo">
							<view class="g_iSelect" v-if="goodsInfo && goodsInfo.sku_lst">
								<view style="display: flex; overflow-x: auto; width: 50%;">
									<view style="display: flex;">
										<view class="g_isItem" v-for="(itme, index) in sku_lst" :key="index"
											:class="JSON.stringify(itme.attribute) == JSON.stringify(keys) ? 'active' : ''">
											<image :src="goodsInfo.main_imgurl"></image>
										</view>
									</view>
								</view>
								<view class="g_isLabel">共有{{ sku_lst.length }}种规格分类可选</view>
							</view>
						</template>
						<template v-else>
							<view class="g_iSelect" v-if="goodsInfo && sku_lst">
								<view style="display: flex; overflow-x: auto; width: 50%;">
									<view style="display: flex;">
										<view class="g_isItem"
											:class="JSON.stringify(sku_lst[0].attribute) == JSON.stringify(this.keys) ? 'active' : ''">
											<image :src="goodsInfo.main_imgurl"></image>
										</view>
									</view>
								</view>
								<view class="g_isLabel">共有1种规格分类可选</view>
							</view>
						</template>
					</view>
				</view>
			</view>
		</view>

		<!-- 商品详情 -->
		<view class="g_detail">
			<!-- <view class="g_dTitle">商品详情</view> -->
			<u-tabs :list="Tabslist" :bar-style="tabsBottomStyle" inactive-color="#939393" active-color="#333333"
				:is-scroll="false" :current="current" @change="change"></u-tabs>
			<view style="padding: 32rpx 36rpx 48rpx 32rpx;" v-show="current == 0">
				<u-parse :html="details"></u-parse>
				<view class="dateilsImage">
					<image :src="baseimg+'/static/activity/dateilsBottom.jpg'" mode="widthFix"></image>
				</view>
			</view>
			<view style="margin: 32rpx 32rpx;background: #fff;" v-show="current == 1">
				<view>
					<view v-for="(item,index) in commentList" :key="index"
						style="display: flex;align-items: flex-start;border-bottom: 1px solid #F4F4F4;padding-bottom: 32rpx;margin-bottom: 32rpx;">
						<view
							style="width: 84rpx;height: 84rpx;margin-right: 20rpx;overflow: hidden;border-radius: 100%;">
							<image :src="item.user_id.avatar.path" mode=""></image>
						</view>
						<view style="flex: 1;">
							<view style="flex: 1;margin-bottom: 15rpx;">
								<view
									style="display: flex;align-items: center;justify-content: space-between;margin-bottom: 10rpx;">
									<view style="font-size: 28rpx;font-weight: 600;color: #333333;">
										{{item.user_id.username}}
									</view>
									<view style="font-size: 24rpx;font-weight: 400;color: #939393;">
										{{item.create_time | formatDate}}
									</view>
								</view>
								<u-rate :count="5" disabled :value="item.score" active-color="#FFD425"
									inactive-color="#E6E6E6" inactive-icon="star-fill"></u-rate>
							</view>
							<!-- <view style="font-size: 24rpx;font-weight: 400;color: #939393;margin-bottom: 15rpx;">复古[平板多用途+瓷白]</view> -->
							<view style="font-size: 28rpx;font-weight: 400;color: #333333;">{{item.content}}</view>
							<view style="display: flex;align-items: center;margin-top: 20rpx;">
								<view v-if="item.type == 1" v-for="(items,indexs) in item.file" :key="indexs"
									style="width: 180rpx;height: 180rpx;margin-right: 10rpx;border-radius: 4rpx;overflow: hidden;">
									<image @click.stop="previewComment(item.file,indexs)" :src="items.path"></image>
								</view>
								<view v-if="item.type == 2" v-for="(items,indexs) in item.file" :key="indexs"
									style="width: 180rpx;height: 180rpx;margin-right: 10rpx;border-radius: 4rpx;overflow: hidden;">
									<video style="width: 180rpx;height: 180rpx;" id="myVideo" :src="items.path"
										controls></video>
								</view>
							</view>
							<!-- <view style="margin-top: 20rpx;background: #F8F8F8;padding: 20rpx;">
								<view style="font-size: 28rpx;font-weight: 400;color: #888;">
									<text style="font-weight: 500;color: #666;margin-right: 20rpx;">店家回复: </text>
									<text>设计效果很不错，软装选购也给了很多的建议，很多问题都帮助解决了，好评~</text>
								</view>
							</view> -->
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 固定条 -->
		<view class="into_shopcart">
			<view class="into_shopcart_box" style="width: 100%;">
				<!-- 左边小图标 -->
				<view class="into_icon">
					<view style="display: flex;">
						<view class="icon_store" @tap="toPage('store')">
							<view class="store">
								<view class="iconfont iconhuaban115"></view>
							</view>
							<text>店铺</text>
						</view>
						<!-- #ifndef MP-WEIXIN -->
						<view class="icon_service" @tap="toCustomer()">
							<view class="service">
								<view class="iconfont icon-comment2"></view>
							</view>
							<text>客服</text>
						</view>
						<!-- #endif -->
						<!-- #ifdef MP-WEIXIN -->
						<view class="icon_service" @tap="toCustomer()" v-if="!config_id && !config_url">
							<view class="service">
								<view class="iconfont icon-comment2"></view>
							</view>
							<text>客服</text>
						</view>
						<view class="icon_service" v-else @click="gitpouchatshow">
							<view class="service">
								<view class="iconfont icon-comment2"></view>
							</view>
							<text>客服</text>
						</view>

						<!-- #endif -->
						<view class="icon_service" @tap="toShopCart()">
							<view class="service">
								<view class="iconfont icon-shopping"></view>
							</view>
							<text>购物车</text>
						</view>
					</view>
				</view>
				<!-- 右边按钮 -->
				<view class="into_btn" v-if="goodsInfo.activity_type === 'seckill'">
					<view class="join" v-if="activityRules.status !== 'ing' || goodsInfo.activity_ing == true">
						<text v-if="activityRules.status == 'waiting'">暂未开始</text>
						<!-- <text v-if="activityRules.status == 'waiting' || goodsInfo.activity_ing == true">暂未开始</text> -->
						<text v-if="activityRules.status == 'end'">已结束</text>
					</view>
					<!-- 加入购物车 -->
					<view class="join_cart" @click="addCart(1)"
						v-if="activityRules.status === 'ing' && goodsInfo.activity_ing == false"><text>加入购物车</text>
					</view>
					<!-- 去结算 -->
					<view class="into_settlement" @click="buy(1)"
						v-if="activityRules.status === 'ing' && goodsInfo.activity_ing == false"><text>立即秒杀</text>
					</view>
				</view>
				<view class="into_btn" v-if="goodsInfo.activity_type === 'groupon'">
					<view v-if="activityRules.status == 'waiting'">
						<view class="join" v-if="activityRules.status !== 'ing'">
							<text v-if="activityRules.status == 'waiting'">暂未开始</text>
							<text v-if="activityRules.status == 'end'">已结束</text>
						</view>
					</view>
					<view v-else-if="activityRules.status != 'waiting'">
						<view class="row-block" v-if="goodsInfo.activity_ing!=true">
							<view class="join_cart" @click="buy(0)">
								<text>￥{{goodsInfo.price}}</text>
								<text>单独购买</text>
							</view>
							<!-- 去开团 -->
							<view class="into_settlement" @click="buy(2)">
								<text>￥{{goodsInfo.activity_price}}</text>
								<text>发起拼团</text>
							</view>
						</view>
						<view class="row-block" v-else>
							<view class="join">
								<text>已结束</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!--模态弹窗-->
		<view class="cu-modal bottom-modal" :class="[is_show_model ? 'show' : '']" @click.stop="is_show_model = false">
			<view class="cu-dialog bottom-md" style="border-top-left-radius: 20rpx;border-top-right-radius: 20rpx;"
				@click.stop="">
				<view class="md-content">

					<view class="md-content-item">
						<view class="s_bIcon iconfont icon-friend"></view>
						<view>分享给好友</view>
						<!-- #ifdef MP-WEIXIN -->
						<button open-type="share" @click="is_show_model = false" class="sharebtn"></button>
						<!-- #endif -->
						<!-- #ifdef APP-PLUS -->
						<button @click="actionsheettip" class="sharebtn"></button>
						<!-- #endif -->
					</view>
					<view class="md-content-item" @click="sharePoster">
						<view class="s_bIcon s_bIcons iconfont icon-picture"></view>
						<view>生成分享大图</view>
					</view>
				</view>
				<view class="cancel" @click="is_show_model = false">取消</view>
			</view>
		</view>
		<!-- 拼团列表-查看更多 -->
		<view class="cu-modal bottom-modal" :class="[is_show_pintuan ? 'show' : '']"
			@click.stop="is_show_pintuan = false">
			<view class="cu-dialog bottom-pt" @click.stop="">
				<scroll-view scroll-y="true" class="scroll-y">
					<view class="pt_bcIcon" @click="ptClose">
						<text>可参与的拼团</text>
						<text class="iconfont icon-cancel" style="float: right; margin-right: 20rpx;position: absolute;right: 0px;"></text>
						</view>
					<view class="pt-content">
						<view class="pintuan" style="padding-bottom: 60rpx;">
							<view class="list" v-for="(item,index) in groupList" :key="index">
								<view  class="list" v-if="formatToHours(item.pay_time)!='拼团已结束'">
								<view class="sidebar_a">
									<image :src="item.headimg"></image>
									<text>{{item.nickname}}</text>
								</view>
								<view class="pt_sidebar_b">
									<text>还差
										<text style="color: #E9423E;">{{item.diff_people}}人</text>
										拼成
									</text>
									<text>{{formatToHours(item.pay_time)}}</text>
								</view>
								<view class="sidebar_right" @click="buy(2,item.team_id)">
									去拼单
								</view>
							</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<qrcode-poster ref="poster" :title="shaegood.product_title" :subTitle="shaegood.store_name"
			:primary_price="parseFloat(shaegood.primary_price)" :headerImg="shaegood.main_imgurl"
			:price="parseFloat(goodsInfo.activity_price)"></qrcode-poster>
		<!-- 弹窗-分享 -->
		<!-- <view class="g_share" v-if="canvasShow">
			
		</view> -->

		<!-- 弹窗-规格 -->
		<view class="Size" v-if="sizePop" @touchmove.stop.prevent>
			<view class="S_bg"></view>
			<view class="S_box">
				<view class="S_bCloak" @tap="hideSizePop"></view>
				<view class="S_bContain">
					<view class="S_bClose" @tap="hideSizePop">
						<view class="S_bcIcon"><text class="iconfont icon-cancel"></text></view>
					</view>
					<view class="S_bInfo">
						<view class="S_biHead">
							<image :src="goodsInfo.main_imgurl" mode="aspectFit"></image>
						</view>
						<view class="S_biCan">
							<view class="S_biFee">
								¥
								<text>{{ goodsInfo.price }}</text>
							</view>
							<view class="S_biTip">
								<view class="yprice" v-if="goodsInfo.rate_price">
									<i>底价</i>
									￥
									<text>{{ goodsInfo.rate_price }}</text>
								</view>
							</view>
							<view class="S_biRemark">编号：1000320203</view>
						</view>
					</view>
					<scroll-view class="S_bConfig" scroll-y>
						<view class="S_bcCan">
							<view class="S_bcGroup" v-for="(items, index1) in goodsInfo.parameter" :key="index1">
								<view class="S_bcTit">{{ items.specifs }}</view>
								<view class="S_bcChecks">
									<view class="S_bcCheck" v-for="(item, index2) in items.child" :key="index2"
										@click="checkedEvent(item, index1)" :class="{ checked: item.checked }">
										{{ item.specif }}
									</view>
								</view>
							</view>
							<view class="S_bcGroup">
								<view class="S_bcTit">数量</view>
								<view class="S_bcNums">
									<view class="S_bcMinus" @tap="minusSizeCart"></view>
									<view class="S_bcNum">{{ sizeNum }}</view>
									<view class="S_bcAdd" @tap="addSizeCart"></view>
								</view>
							</view>
						</view>
					</scroll-view>
					<view class="S_bBtns">
						<view class="S_bbBtn1" @click="addCart" style="width: 100%;">加入购物车</view>
						<view class="S_bbBtn1 S_bbBtn2" @click="buy()" style="width: 100%;">立即购买</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 微信客服 -->
		<view class="pouchat" v-if="pouchatshow">
			<view class="poucont">
				<view class="chatlist">
					<view class="chatml" @click="gitwxchat()" v-if="config_url">
						<image src="https://manager.ryz1620.com/static/my/wxchat.png" mode="widthFix"></image>
						<text class="t1">在线微信客服</text>
						<text class="t2">可直接联系客服</text>
					</view>
					<view class="chatml" v-if="config_id">
						<cell class="cell-service" bind:startmessage='startmessage'
							bind:completemessage="completemessage" :plugid="config_id" />
						<image src="https://manager.ryz1620.com/static/my/codechat.png" mode="widthFix"></image>
						<text class="t1">添加微信客服</text>
						<text class="t2">扫微信二维码</text>
					</view>
				</view>
				<view class="iconfont icon-close" @click="wxCodeClick"></view>
			</view>
		</view>
	</view>
</template>

<script>
	import URL from '@/config/url.js';
	//import navBar from '@/components/navBar/navBar.vue';
	import service_mall from '@/service/mall.js';
	import GoodsEvaluate from '@/service/GoodsEvaluate.js';
	import QrcodePoster from '@/components/zhangyu-qrcode-poster/zhangyu-qrcode-poster.vue';
	import shPriceCard from '@/components/sh-price-card.vue';
	import shServe from '@/components/sh-serve.vue';
	export default {
		components: {
			QrcodePoster,
			shPriceCard,
			shServe,
			// #ifdef MP-WEIXIN
			"cell": "plugin://contactPlugin/cell",
			// #endif
		},
		data() {
			return {
				product_id: null,
				goodsInfo: {},
				bannerIndex: 0,
				// 规格
				sku_lst: [],
				sizePop: false,
				sizeImage: null, // 规格图片
				sizePrice: null, // 规格价格
				sizeNum: 1,
				// 购物车
				cart: null,
				child: '',
				is_show_model: false, //是否显示分享模态窗
				shaegood: '',
				sharecode: '',
				specif: '',
				html: '',
				sku_id: '',
				keys: [],
				details: '',
				userId: '',
				cool_show: '',
				product_follow_status: '',
				status: 1,
				activityRules: {},
				showServe: false,
				service: [{
						description: '超快无审核退款流程',
						id: 4,
						image: 'https://cos.ryz1620.com/liankun/static/fuw1.png',
						name: '极速退款'
					},
					{
						description: '卖家投保退货运费险',
						id: 3,
						image: 'https://cos.ryz1620.com/liankun/static/fuw2.png',
						name: '退货保障'
					},
					{
						description: '满足相应条件(吊牌缺失，洗涤后不支持)时，消费者可申请“七天无理由退货”',
						id: 2,
						image: 'https://cos.ryz1620.com/liankun/static/fuw3.png',
						name: '七天退换'
					},
					{
						description: '正品保障,假一赔三',
						id: 1,
						image: 'https://cos.ryz1620.com/liankun/static/fuw4.png',
						name: '正品保障'
					}
				],
				gid: '',
				u: '', //创业精英从用户端转发给用户标识
				scrollTop: 0,
				titleText: '',
				Tabslist: [{
						name: '商品详情'
					},
					{
						name: '评价'
					}
				],
				current: 0,
				tabsBottomStyle: {
					'border-radius': ' 4rpx 4rpx 0rpx 0rpx',
					width: '40rpx',
					height: '8rpx',
					background: '#FFD425'
				},
				count: 5,
				value: 2,
				commentList: [],
				config_id: '',
				config_url: '',
				pouchatshow: false,
				is_show_pintuan: false, //拼团弹窗
				groupList: [],
				baseimg:this.$static,
				share_id:'',//分享人
			};
		},
		onPageScroll(e) {
			let scrollTop = e.scrollTop;
			this.scrollTop = scrollTop;
			if (e.scrollTop >= 300) {
				this.titleText = '商品详情';
			} else {
				this.titleText = '';
			}
			// 滑动距离超过用户名 => 显示导航栏
		},
		onLoad(options) {
			this.$utils.getUrl()
			let scene = decodeURIComponent(options.scene);
			let token = uni.getStorageSync('token');
			scene = scene.split('&');
			let obj = {};
			let app = getApp();
			for (let i = 0; i < scene.length; i++) {
				let newscene = scene[i].split('=');
				obj[newscene[0]] = newscene[1];
			}
			if (obj.id) {
				this.product_id = obj.id;
				this.gid = obj.gid ? obj.gid : '';
				this.u = obj.u ? obj.u : '';
			} else if (app.globalData.product_id) {
				this.product_id = app.globalData.product_id;
				this.gid = app.globalData.gid;
			} else {
				this.product_id = options.id;
				this.gid = options.gid ? options.gid : '';
				this.u = options.u ? options.u : '';
			}
			if(obj.s){
				let shareuId = obj.s;
				this.share_id=shareuId;
			}
			if (!token) {
				uni.setStorageSync('id', this.product_id);
				uni.setStorageSync('gid', this.gid);
				uni.setStorageSync('u', this.u);
				uni.redirectTo({
					url: '/pages_login/pages/login/login/index'
				});
			} else {
				this.toBindUser();
				this.getData();
				this.getlog();
				this.getProductCommentList()
			}

			if (options.share_uid) {
				let shareuId = options.share_uid;
				this.share_id=shareuId;
				this.$store.commit('index/SET_shareuId', shareuId);
				if (token && shareuId) {
					service_mall.getPromoter({
						share_uid: shareuId
					}).then(res => {});
				}
			}
			if (obj.s) {
				let shareuId = obj.s;//分享海报传过来的分享者id
				this.$store.commit('index/SET_shareuId', shareuId);
				if (token && shareuId) {
					service_mall.getPromoter({
						share_uid: shareuId
					}).then(res => {});
				}
			}
			if (obj.gid) {
				let shareuId = obj.gid;
				this.$store.commit('index/SET_shareuId', shareuId);
				if (token && shareuId) {
					service_mall.getPromoter({
						share_uid: shareuId
					}).then(res => {});
				}
			}
			this.userId = uni.getStorageSync('userId');
		},
		onShareAppMessage(res) {
			if (res.from === 'button') {}
			return {
				title: this.goodsInfo.product_title,
				path: '/pages_now/pages/now/groupon/goods/details?id=' + this.product_id + '&share_uid=' + this
					.userId + '&gid=' + this.gid + '&u=u',
				success: function(res) {
					console.log('成功', res);
				}
			};
		},
		onShareTimeline(res) {
			if (res.from === 'menu') {}
			return {
				title: this.goodsInfo.product_title,
				path: '/pages_now/pages/now/groupon/goods/details?id=' + this.product_id + '&share_uid=' + this
					.userId + '&gid=' + this.gid + '&u=u',
				success: function(res) {
					console.log('成功', res);
				}
			};
		},
		filters: {
			/**
			 * 处理富文本里的图片宽度自适应
			 * 1.去掉img标签里的style、width、height属性
			 * 2.img标签添加style属性：max-width:100%;height:auto
			 * 3.修改所有style里的width属性为max-width:100%
			 * 4.去掉<br/>标签
			 * @param html
			 * @returns {void|string|*}
			 */
			formatRichText(html) {
				//控制小程序中图片大小
				let newContent = html.replace(/<img[^>]*>/gi, function(match, capture) {
					match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
					match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
					match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
					return match;
				});
				newContent = newContent.replace(/style="[^"]+"/gi, function(match, capture) {
					match = match.replace(/width:[^;]+;/gi, 'max-width:100%;width:100%;').replace(/width:[^;]+;/gi,
						'max-width:100%;width:100%;');
					return match;
				});
				newContent = newContent.replace(/<br[^>]*\/>/gi, '');
				newContent = newContent.replace(/\<img/gi,
					'<img style="width:100%;max-width:100%;height:auto;display:inline-block;margin:10rpx auto;"');
				return newContent;
			},
			formatDate(value) {
				let date = new Date(parseInt(value) * 1000);
				let y = date.getFullYear();
				let m = date.getMonth() + 1;
				m = m < 10 ? "0" + m : m;
				let d = date.getDate();
				d = d < 10 ? "0" + d : d;
				let h = date.getHours();
				h = h < 10 ? "0" + h : h;
				let minute = date.getMinutes();
				let second = date.getSeconds();
				minute = minute < 10 ? "0" + minute : minute;
				second = second < 10 ? "0" + second : second;
				return y + "-" + m + "-" + d + " " + h + ":" + minute + ":" + second;
			}
		},
		methods: {
			startmessage() {
				console.log('startmessage--start')
			},
			completemessage(e) {
				console.log('completemessage--ok')
			},
			// 预览图片
			previewComment(urls, index) {
				let img_url = []
				for (let i = 0; i < urls.length; i++) {
					img_url.push(
						urls[i].path
					);
				}
				uni.previewImage({
					urls: img_url,
					current: index,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			getProductCommentList() {
				var that = this;
				var params = {
					product_id: that.product_id
				};
				GoodsEvaluate.getProductCommentList(params).then(res => {
					if (res.code == 1) {
						var data = res.data
						that.commentList = data
						// console.log(data);
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				});
			},
			change(index) {
				this.current = index;
			},
			// 用户绑定创业精英
			toBindUser() {
				if (this.gid && this.u == 'u') {
					service_mall.toBindUser({
						puid: this.gid
					}).then(res => {
						console.log(res, '绑定结果');
						if (res.code == 1) {}
					});
				}
			},
			gitis_show_model() {
				this.is_show_model = true;
			},
			//分享海报
			sharePoster() {
				//获取带参数二维码并传递
				this.is_show_model = false;
				this.$refs.poster.showCanvas(this.sharecode);
			},
			shareimg() {
				service_mall.goods_getshare({
					product_id: this.product_id,
					u: 'u',
					gid: this.gid
				}).then(res => {
					if (res.code == 1) {
						this.shaegood = res.data;
						this.sharecode = res.data.wx_code_url;
					}
				});
			},
			// 获取企业微信callme配置
			gitConfig() {
				service_mall.getCallMeConfig({
					partner_type: 'shop',
					partner_id: this.goodsInfo.store_id
				}).then(res => {
					if (res.code == 1) {
						this.config_id = res.data.config_id;
					}
				});
			},
			gitwxConfig() {
				service_mall.getwxMeConfig({
					partner_type: 'shop',
					partner_id: this.goodsInfo.store_id
				}).then(res => {
					if (res.code == 1) {
						this.config_url = res.data.url;
					}
				});
			},
			gitpouchatshow() {
				this.pouchatshow = true
			},
			wxCodeClick() {
				this.pouchatshow = false
			},
			gitwxchat() {
				wx.openCustomerServiceChat({
					extInfo: {
						url: this.config_url
					},
					corpId: 'ww66d57764961614ea ',
					success(res) {}
				})
			},
			//记录足迹
			getlog() {
				service_mall.getshoplog({
					product_id: this.product_id
				}).then(res => {});
			},
			getActivityRules(e) {
				if (e) {
					this.activityRules = JSON.parse(e);
				}
			},
			// 点击跳转购物车
			toShopCart() {
				uni.navigateTo({
					url: '/pages_mall/pages/mall/cart/cart'
				});
			},
			// 收藏
			focusStore() {
				let follow = this.product_follow_status;
				if (follow == 1) {
					let status = 0;
					uni.showModal({
						title: '提示',
						content: '确认取消收藏?',
						success: res => {
							if (res.confirm) {
								service_mall.getcollect({
									product_id: this.product_id,
									status: status
								}).then(res => {
									if (res.code == 1) {
										this.product_follow_status = status == 1;
									} else {
										this.$utils.showErr({
											title: res.msg
										});
									}
								});
							} else if (res.cancel) {
								return;
							}
						}
					});
				} else {
					let status = 1;
					service_mall.getcollect({
						product_id: this.product_id,
						status: status
					}).then(res => {
						if (res.code == 1) {
							this.product_follow_status = status == 1;
						} else {
							this.$utils.showErr({
								title: res.msg
							});
						}
					});
				}
			},
			// 获取商品数据
			getData() {
				service_mall
					.goods_getDetail({
						product_id: this.product_id
					})
					.then(res => {
						if (res.code == 1) {
							this.shareimg()
							let data = res.data;
							// 处理数据
							let goodsInfo = data;
							this.product_follow_status = res.data.product_follow_status;
							goodsInfo.volume = goodsInfo.volume ? goodsInfo.volume : 0;
							goodsInfo.specs_type = goodsInfo.specs_type == 1 ? false : true;
							this.sku_lst = data.sku_lst;
							if(goodsInfo.activity_users && goodsInfo.activity_users.length>0){
								this.groupList = goodsInfo.activity_users; //拼团人员信息
							}
							// 多规格
							if (goodsInfo.specs_type == 2) {}
							// 单规格
							else {
								goodsInfo.price = goodsInfo.sku_lst[0].price;
								goodsInfo.costPrice = goodsInfo.sku_lst[0].primary_price;
								goodsInfo.stockNum = goodsInfo.sku_lst[0].num;
								goodsInfo.sizeId = goodsInfo.sku_lst[0].sku_id;
							}
							this.cool_show = data.cool_show;
							this.details = data.details;
							this.goodsInfo = goodsInfo;
							this.gitConfig()
							this.gitwxConfig()
							this.child = goodsInfo.parameter[0].child;

						}
					})
					.catch(err => {});
			},
			//选择规格
			checkedEvent(data, index1) {
				if (data.checked) {
					this.$set(data, 'checked', false);
					this.sku_id = '';
				} else {
					this.goodsInfo.parameter[index1].child.map(item => {
						this.$set(item, 'checked', false);
					});
					this.$set(data, 'checked', true);
					this.get_keys();
				}
			},
			get_keys() {
				let keys = [];
				this.goodsInfo.parameter.map((item1, index1) => {
					let checkedItem = item1.child.find(r => r.checked);
					if (checkedItem) {
						keys.push({
							key: item1.specifs,
							value: checkedItem.specif
						});
					}
				});
				this.keys = keys;
				let sku_lst = [];
				if (this.goodsInfo && this.goodsInfo.sku_lst) {
					sku_lst = this.goodsInfo.sku_lst;
				}
				for (let i = 0; i < sku_lst.length; i++) {
					if (JSON.stringify(sku_lst[i].attribute) == JSON.stringify(keys)) {
						this.sku_id = sku_lst[i].sku_id;
						this.goodsInfo.price = sku_lst[i].price;
						this.goodsInfo.rate_price = sku_lst[i].rate_price;
						this.goodsInfo.stockNum = sku_lst[i].num;
					}
				}
			},
			// 添加购物车
			addCart(e) {
				// console.log(this.goodsInfo.stockNum)
				let token = uni.getStorageSync('token');
				if (!token) {
					uni.navigateTo({
						url: '/pages_login/pages/login/login/index'
					});
				}
				let stockNum = 0;
				if (!this.goodsInfo.specs_type && this.goodsInfo.sku_lst.length > 0) {
					//单
					this.sku_id = this.goodsInfo.sku_lst[0].sku_id;
				}

				if (this.goodsInfo.specs_type && !this.sku_id) {
					this.sizePop = true;
					if (e != 1) {
						uni.showToast({
							title: '请选择规格',
							icon: 'none',
							duration: 2000
						});
					}
					return;
				}
				if (this.goodsInfo.specs_type) {
					let result = this.goodsInfo.sku_lst.find(r => r.sku_id == this.sku_id);
					if (result) {
						stockNum = result.num;
					}
				} else {
					stockNum = this.goodsInfo.stockNum;
				}
				// 先判断库存是否足够
				if (stockNum < this.sizeNum) {
					uni.showToast({
						title: '库存不足',
						icon: 'none'
					});
					return;
				}
				service_mall.goods_getadd({
					product_id: this.product_id,
					sku_id: this.sku_id,
					num: this.sizeNum,
					share_id:this.share_id
				}).then(res => {
					if (res.code == 1) {
						uni.showToast({
							title: '添加购物车成功',
							icon: 'success'
						});
						this.sizePop = false;
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				});
			},
			// 立即购买
			buy(e, team_id) {
				// console.log(this.goodsInfo.stockNum)
				let token = uni.getStorageSync('token');
				if (!token) {
					uni.navigateTo({
						url: '/pages_login/pages/login/login/index'
					});
				}
				let stockNum = 0;
				if (!this.goodsInfo.specs_type && this.goodsInfo.sku_lst.length > 0) {
					//单
					this.sku_id = this.goodsInfo.sku_lst[0].sku_id;
				}

				if (this.goodsInfo.specs_type && !this.sku_id) {
					this.sizePop = true;
					if (e != 1) {
						uni.showToast({
							title: '请选择规格',
							icon: 'none',
							duration: 2000
						});
					}
					return;
				}
				if (this.goodsInfo.specs_type) {
					let result = this.goodsInfo.sku_lst.find(r => r.sku_id == this.sku_id);
					if (result) {
						stockNum = result.num;
					}
				} else {
					stockNum = this.goodsInfo.stockNum;
				}
				// 先判断库存是否足够
				if (stockNum < this.sizeNum) {
					uni.showToast({
						title: '库存不足',
						icon: 'none'
					});
					return;
				}
				let params = {
					origin_type: 2,
					cart_ids: '',
					goods: {
						sku_id: this.sku_id,
						pack_id: '',
						num: this.sizeNum
					},
					share_id:this.share_id
				};
				if (e == 2) {
					this.is_show_pintuan = false;
				}
				//验证是否可参与拼团
				if(team_id && team_id!=''){
					service_mall.pintuanValid({
						product_id: this.product_id,
						team_id: team_id,
					}).then(res => {
						if (res.code == 1) {
							this.orderPage(e,params,team_id)
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							});
						}
					});
				}else{
					this.orderPage(e,params);
				}
			},
            orderPage(e,params,team_id){
				uni.setStorage({
					key: 'local_order_list',
					data: params,
					success: () => {
						uni.navigateTo({
							url: '/pages_mall/pages/mall/order/order?sourceFrom=detail&Nocart=1&buy_type=' +
								e + '&team_id=' + team_id
						});
					}
				});
			},
			// 添加数量
			addSizeCart() {
				this.sizeNum++;
			},

			// 删减购物车-规格弹窗
			minusSizeCart() {
				if (this.sizeNum > 1) this.sizeNum--;
			},

			// 弹窗-规格
			showSizePop(i) {
				console.log(i, '11');
				console.log(this.goodsInfo, '22');
				this.sizePop = true;
			},
			// 预览图片
			preview(index, urls) {
				let img_url = [];
				for (let i = 0; i < urls.length; i++) {
					img_url.push(urls[i].image_path);
				}
				uni.previewImage({
					urls: img_url,
					current: index,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			hideSizePop() {
				this.sizePop = false;
			},
			cartlist() {
				let token = uni.getStorageSync('token');
				if (!token) {
					uni.navigateTo({
						url: '/pages_login/pages/login/login/index'
					});
				} else {
					uni.navigateTo({
						url: '/pages_mall/pages/mall/cart/cart'
					});
				}
			},
			dviewr() {
				console.log(this.cool_show);
				uni.navigateTo({
					url: '/pages_3D/pages/3D/shop?coolid=' + this.cool_show
				});
			},
			// 跳转页面
			toPage(page, {
				store_id
			} = {}) {
				if (page === 'cart') uni.navigateTo({
					url: '/pages_mall/pages/mall/cart/cart'
				});
				else if (page === 'store') uni.navigateTo({
					url: '/pages_mall/pages/mall/store/store?storeId=' + this.goodsInfo.store_id
				});
			},
			// 轮播图内容变动
			changeBanner(e) {
				this.bannerIndex = e.detail.current;
			},

			// 禁止滑动
			moveHandle() {},
			toCustomer() {
				uni.showToast({
					title: '哎呀!不好意思，暂未配置客服...',
					icon: 'none',
					duration: 2000
				});
				// console.log(this.goodsInfo.store_id);
				// uni.setStorageSync('localGoodsInfo', this.goodsInfo);
				// uni.navigateTo({
				// 	url: '/pages_customer/pages/index?partner_type=shop&partner_id=' + this.goodsInfo.store_id
				// });
			},
			// app分享
			actionsheettip() {
				let title = this.goodsInfo.product_title;
				let imageUrl = this.goodsInfo.round_imgs[0].image_path;
				let path = '/pages_now/pages/now/groupon/goods/details?id=' + this.product_id + '&share_uid=' +
					this.userId + '&gid=' + this.gid + '&u=u';
				let that = this;
				uni.downloadFile({
					url: imageUrl,
					success: (res) => {
						if (res.statusCode === 200) {
							uni.compressImage({
								src: res.tempFilePath,
								quality: 30,
								success: ress => {
									var tempFilePath = ress.tempFilePath;
									that.$common.appShare(title, tempFilePath, path, result => {
										if (result == 'success') {
											// 	分享成功执行相关
										}
									})
								}
							})
						}
					}
				});
			},
			formatToHours(t) {
				let timestamp = Math.round(new Date() / 1000);//当前时间戳
				let interval =timestamp - t;
				let ts = 86400-interval;
				let format = {
					h: '00',
					m: '00',
					s: '00'
				};
				if (ts > 0) {
					let h = Math.floor(ts / 3600);
					let m = Math.floor((ts / 60) % 60);
					let s = Math.floor(ts % 60);

					format.h = h < 10 ? '0' + h : h;
					format.m = m < 10 ? '0' + m : m;
					format.s = s < 10 ? '0' + s : s;
					var myDate = new Date();
					let days = parseInt(format.h / 24);
					let hours = myDate.getHours();
					if (format.h > 24) {
						format = days + '天' + (23 - hours) + '小时';
					} else {
						format ='剩余'+ format.h + ':' + format.m + ':' + format.s;
					}
				}else{
					format='拼团已结束'
				}
				
				return format;
			},
			pintuanShow() {
				this.is_show_pintuan = true;
			},
			ptClose() {
				this.is_show_pintuan = false;
			},
			
		}
	};
</script>

<style lang="scss" scoped>
	.goods {

		// 商品轮播图
		.g_banner {
			height: 680rpx;
			background: #fff;
			position: relative;

			.g_bDots {
				width: 100%;
				position: absolute;
				bottom: 20rpx;
				left: 0;
				display: flex;
				justify-content: center;
			}

			.g_bDot {
				padding: 16rpx 8rpx;

				&.active .g_bIcon {
					width: 22rpx;
					border-radius: 10rpx;
					background: #16181c;
				}
			}

			.g_bIcon {
				width: 10rpx;
				height: 10rpx;
				border-radius: 50%;
				background: rgba(26, 28, 32, 0.4);
			}
		}

		// 商品基础信息
		.GoodsMessage {
			background: #fff;
			border-top: 2rpx solid #f6f7fb;

			.GoodsView {
				display: flex;
				justify-content: space-between;
				padding: 32rpx;
				align-items: center;

				.GoodsPrice {
					display: flex;
					align-items: flex-end;
					font-weight: bold;

					.GoodsPriceView {
						color: #ef5854;
						font-size: 48rpx;
						margin-right: 20rpx;

						.GoodsSymbol {
							font-size: 32rpx;
							margin-right: 10rpx;
						}
					}

					.GoodsBuyNum {
						font-size: 28rpx;
						font-weight: 400;
						line-height: 56rpx;
						color: #939393;
					}
				}

				.GoodsTool {
					display: flex;
					align-items: center;

					.GoodsShare {
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						margin-right: 19rpx;

						.icon-share {
							font-size: 40rpx;
						}

						.GoodsShareText {
							font-size: 24rpx;
							font-weight: 400;
							line-height: 34rpx;
							color: #1a1c20;
						}
					}

					.GoodsLike {
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						margin-left: 19rpx;

						.iconhuaban117 {
							font-size: 40rpx;
							color: #ef5854;
						}

						.iconhuaban161 {
							font-size: 40rpx;
						}

						.GoodsLikeText {
							font-size: 24rpx;
							font-weight: 400;
							line-height: 34rpx;
							color: #1a1c20;
						}
					}
				}
			}

			.GoodsTitle {
				font-size: 32rpx;
				font-weight: 600;
				line-height: 44rpx;
				color: #1a1c20;
				padding: 0 32rpx 32rpx 32rpx;
				text-align: justify;
			}
		}

		// 其他
		.g_it {
			.g_iGroup {
				margin-top: 16rpx;
				background: #fff;
			}

			.g_iItem {
				min-height: 90rpx;

				&:last-child .g_iCont::after {
					content: none;
				}
			}

			.g_iLabel {
				min-width: 126rpx;
				height: 90rpx;
				line-height: 90rpx;
				padding: 0 12rpx 0 32rpx;
				float: left;
			}

			.g_iCont {
				position: relative;
				overflow: hidden;

				&::after {
					content: '';
					width: 100%;
					height: 1px;
					background: #f4f4f4;
					position: absolute;
					bottom: 0;
					left: 0;
					transform: scaleY(0.5);
				}
			}

			.g_iIcon {
				width: 32rpx;
				height: 32rpx;
				position: absolute;
				top: 28rpx;
				right: 36rpx;
			}

			.g_iTxt {
				height: 90rpx;
				line-height: 90rpx;
				color: #666;
			}

			.g_iSelect {
				padding-bottom: 24rpx;
				display: flex;

				.g_isItem {
					width: 60rpx;
					height: 60rpx;
					margin-right: 16rpx;
					border-radius: 8rpx;
					background: #f6f7fb;
				}

				.g_isItem.active {
					border: 1px #dd524d solid;
				}

				.g_isLabel {
					width: 284rpx;
					height: 60rpx;
					line-height: 60rpx;
					text-align: center;
					color: #939393;
					font-size: 22rpx;
					border-radius: 8rpx;
					background: #f6f7fb;
				}
			}
		}

		//拼团列表
		.row-collage {
			padding: 32rpx;

			.column {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.column-title {
					color: #1A1C20;
				}

				.right-more {
					display: flex;
					align-items: center;
					font-size: 24rpx;
					font-weight: 400;
					color: #666666;
					opacity: 1;
				}
			}
		}

		.pintuan {
			margin-top: 25rpx;

			.list {
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 100rpx;
                
				.sidebar_a {
					width:358rpx;
					display: flex;
					align-items: center;
					color: #1A1C20;
					image {
						width: 72rpx;
						height: 72rpx;
						border-radius: 50%;
						margin-right: 16rpx;
					}

					text {
						width: 75%;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
				}

				.sidebar_b {
					display: flex;
					width: 33%;
					flex-wrap: wrap;
					margin-left: auto;
					color: #1A1C20;
					font-size: 24rpx;
					opacity: 1;
					margin-right: -40rpx;
				}

				.sidebar_right {
					width: 134rpx;
					height: 48rpx;
					background: #E9423E;
					opacity: 1;
					border-radius: 24rpx;
					color: #fff;
					font-size: 26rpx;
					text-align: center;
					line-height: 48rpx;
				}
			}
		}

		// 商品详情
		.g_detail {
			// padding: 48rpx 36rpx 48rpx 32rpx;
			margin-top: 16rpx;
			background: #fff;
			padding-bottom: 160rpx;

			.g_dTitle {
				height: 44rpx;
				line-height: 44rpx;
				color: #000;
				font-size: 32rpx;
			}

			.g_dBox {
				margin-top: 24rpx;
				border: 1px solid rgba(0, 0, 0, 0.08);
			}

			.g_dItem {
				height: 84rpx;
				border-bottom: 1px solid rgba(0, 0, 0, 0.08);
				display: flex;

				&:last-child {
					border: none;
				}
			}

			.g_dGroup {
				width: 50%;
				display: flex;
				align-items: center;
			}

			.g_dLabel {
				min-width: 146rpx;
				height: 84rpx;
				line-height: 84rpx;
				color: #000;
				font-size: 24rpx;
				padding: 0 24rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

			.g_dVal {
				max-height: 68rpx;
				line-height: 34rpx;
				color: #787878;
				font-size: 24rpx;
			}
		}

		// 底部操作栏
		.g_btm {
			.g_bShim {
				height: 100rpx;
				box-sizing: content-box;
				padding-bottom: constant(safe-area-inset-bottom);
				padding-bottom: env(safe-area-inset-bottom);
			}

			.g_bCan {
				width: 100vw;
				height: 100rpx;
				background: #fff;
				position: fixed;
				bottom: 0;
				left: 0;
				box-sizing: content-box;
				padding-bottom: constant(safe-area-inset-bottom);
				padding-bottom: env(safe-area-inset-bottom);
			}

			.g_bRight {
				height: 100%;
				padding-right: 22rpx;
				float: right;
				display: flex;
				align-items: center;
			}

			.g_brAdd,
			.g_brBuy {
				width: 226rpx;
				height: 72rpx;
				line-height: 72rpx;
				text-align: center;
				color: #fff;
				font-weight: bold;
				border-radius: 10rpx 0 0 10rpx;
				background: #c3ab7c;
			}

			.g_brBuy {
				width: 204rpx;
				border-radius: 0 10rpx 10rpx 0;
				background: #333;
				background: #ccc;
			}

			.g_bLeft {
				height: 100%;
				overflow: hidden;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.g_blItem {
				width: 88rpx;
			}

			.g_blIcon {
				width: 40rpx;
				height: 40rpx;
				line-height: 40rpx;
				text-align: center;
				font-size: 40rpx;
				margin: 0 auto;
			}

			.g_blTxt {
				height: 32rpx;
				line-height: 32rpx;
				text-align: center;
				font-size: 22rpx;
			}
		}

		// 弹窗-分享
		.g_share {
			width: 100vw;
			height: 100vh;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 1001;

			.g_sBg {
				width: 100%;
				height: 100%;
				background: rgba(0, 0, 0, 0.6);
			}

			.g_sBox {
				width: 100%;
				height: 338rpx;
				border-radius: 16rpx 16rpx 0 0;
				background: #fff;
				position: absolute;
				bottom: 0;
				left: 0;
				padding-bottom: constant(safe-area-inset-bottom);
				padding-bottom: env(safe-area-inset-bottom);
			}

			.g_sPoster {
				position: absolute;
				bottom: 420rpx;
				left: 56rpx;
				padding-bottom: constant(safe-area-inset-bottom);
				padding-bottom: env(safe-area-inset-bottom);
			}

			.g_spCan {
				width: 640rpx;
				height: 888rpx;
				border-radius: 16rpx;
				background: #fff;
				box-shadow: 0 0 12rpx 0 rgba(0, 0, 0, 0.16);
			}
		}
	}

	// 弹窗-规格
	.Size {
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1001;

		.S_bg {
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, 0.8);
		}

		.S_box {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			display: flex;
			flex-flow: column;
		}

		.S_bCloak {
			height: 176rpx;
		}

		.S_bContain {
			border-radius: 24rpx 24rpx 0 0;
			background: #fff;
			position: relative;
			overflow: hidden;
			display: flex;
			flex-flow: column;
			flex: 1;
		}

		.S_bClose {
			width: 104rpx;
			height: 120rpx;
			position: absolute;
			top: 0;
			right: 0;
			display: flex;
			justify-content: center;
			align-items: center;

			.S_bcIcon {
				width: 40rpx;
				height: 40rpx;
				line-height: 40rpx;
				text-align: center;
				color: #000;
				font-size: 20rpx;
				border-radius: 50%;
				background: #f9f6f3;
			}
		}

		.S_bInfo {
			padding: 36rpx 32rpx 20rpx;

			.S_biHead {
				width: 178rpx;
				height: 178rpx;
				margin-right: 24rpx;
				border-radius: 10rpx;
				background: #f0f0f0;
				box-shadow: 0 4rpx 4rpx 0 rgba(136, 136, 136, 0.16);
				overflow: hidden;
				float: left;
			}

			.S_biCan {
				overflow: hidden;
			}

			.S_biFee {
				height: 60rpx;
				line-height: 60rpx;
				color: #e9423e;
				font-size: 32rpx;
				font-weight: bold;
				margin-top: 32rpx;

				&>text {
					font-size: 44rpx;
				}
			}

			.S_biTip {
				height: 40rpx;
				line-height: 40rpx;
				color: #e9423e;
				font-size: 20rpx;
				margin-top: 10rpx;
				border-radius: 4rpx;
				background: #feeff2;
				display: inline-block;

				.yprice {
					margin-left: 0;
				}
			}

			.S_biRemark {
				height: 28rpx;
				line-height: 28rpx;
				color: #939393;
				font-size: 20rpx;
				margin-top: 10rpx;
			}
		}

		.S_bConfig {
			overflow: hidden;
			flex: 1;

			.S_bcCan {
				padding: 0 34rpx 146rpx;
			}

			.S_bcGroup {
				padding-top: 40rpx;
				position: relative;

				&:first-child {
					padding-top: 20rpx;
				}
			}

			.S_bcTit {
				height: 40rpx;
				line-height: 40rpx;
				font-weight: bold;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.S_bcChecks {
				padding-top: 8rpx;
			}

			.S_bcCheck {
				height: 42rpx;
				line-height: 42rpx;
				color: #939393;
				font-size: 24rpx;
				padding: 0 26rpx;
				margin: 16rpx 16rpx 0 0;
				border-radius: 22rpx;
				background: #f5f5f5;
				display: inline-block;

				&.checked {
					color: #e9423e;
					background: #feeff2;
				}
			}

			.S_bcNums {
				height: 48rpx;
				position: absolute;
				top: 36rpx;
				right: -22rpx;
				display: flex;
			}

			.S_bcNum {
				width: 72rpx;
				height: 48rpx;
				line-height: 48rpx;
				text-align: center;
				border-radius: 8rpx;
				background: #f6f7fb;
			}

			.S_bcMinus,
			.S_bcAdd {
				width: 72rpx;
				height: 48rpx;
				position: relative;
			}

			.S_bcMinus::before,
			.S_bcAdd::before,
			.S_bcAdd::after {
				content: '';
				width: 24rpx;
				height: 4rpx;
				border-radius: 4rpx;
				background: #333;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
			}

			.S_bcAdd::after {
				width: 4rpx;
				height: 24rpx;
			}
		}

		.S_bBtns {
			height: 86rpx;
			color: #fff;
			font-weight: bold;
			padding: 20rpx 15rpx 0;
			border-top: 1px solid #f8f6f3;
			background: #fff;
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			box-sizing: content-box;
			display: flex;
			justify-content: space-between;
			padding-bottom: constant(safe-area-inset-bottom);
			padding-bottom: env(safe-area-inset-bottom);

			.S_bbBtn1,
			.S_bbBtn2 {
				width: 294rpx;
				height: 72rpx;
				line-height: 72rpx;
				text-align: center;
				border-radius: 8rpx;
				background: #c3ab7c;
				margin: 0 15rpx;

				&:active {
					opacity: 0.88;
				}
			}

			.S_bbBtn2 {
				background: #333;
			}
		}
	}

	// 固定条
	.into_shopcart {
		width: 100%;
		height: 100rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 301;
		background-color: #fff;
		display: flex;
		align-items: center;

		&_box {
			padding: 14rpx 22rpx;
			display: flex;

			// 左边小图标
			.into_icon {
				flex: 1;
				position: relative;

				.icon_store {
					flex: 1;
					text-align: center;

					.store {
						width: 100%;
						font-size: 36rpx;

						image {
							display: block;
							margin: auto;
							width: 32rpx;
							height: 32rpx;
						}
					}

					text {
						font-size: 22rpx;
						font-weight: 400;
						line-height: 32rpx;
						color: #333333;
						margin-top: 6rpx;
					}
				}

				.icon_service {
					flex: 1;
					position: relative;
					text-align: center;

					.cell-service {
						position: absolute;
						right: 0;
						bottom: 0;
						left: 0;
						top: 0;
						opacity: 0;
						z-index: 10;

						.cell--bubble {
							width: 100%;
						}
					}

					.service {
						width: 100%;
						font-size: 36rpx;

						.iconhuaban117 {
							color: #fa3534;
						}

						image {
							display: block;
							margin: auto;
							width: 32rpx;
							height: 32rpx;
						}
					}

					text {
						font-size: 22rpx;
						font-weight: 400;
						line-height: 32rpx;
						color: #333333;
						margin-top: 6rpx;
					}
				}

				.contact_btn {
					width: 44rpx;
					height: 74rpx;
					margin-left: 46rpx;
				}

				button[plain] {
					border: 0 none;
				}
			}

			// 右边按钮
			.into_btn {
				height: 78rpx;
				border-radius: 10rpx;
				margin-left: 40rpx;
				display: flex;

				.join {
					width: 430rpx;
					background: #ccc;
					text-align: center;
					color: #fff;
					line-height: 78rpx;
					border-radius: 10rpx;
				}

				.row-block {
					display: flex;
					align-items: center;

					.join_cart {
						width: 226rpx;
						height: 100%;
						text-align: center;
						background-color: #c3ab7c;
						border-radius: 10rpx 0rpx 0rpx 10rpx;

						text {
							padding-top: 4rpx;
							display: block;
							font-size: 26rpx;
							font-weight: 500;
							line-height: 32rpx;
							color: #ffffff;
						}
					}

					.into_settlement {
						width: 204rpx;
						height: 100%;
						text-align: center;
						line-height: 78rpx;
						background-color: #333;
						border-radius: 0rpx 10rpx 10rpx 0rpx;

						text {
							padding-top: 4rpx;
							display: block;
							font-size: 26rpx;
							font-weight: 500;
							line-height: 32rpx;
							color: #ffffff;
						}
					}
				}
			}
		}
	}

	.yprice {
		margin-left: 30rpx;
		border: 1px #e9423e solid;
		display: inline-block;
		font-size: 18rpx;
		line-height: 32rpx;
		padding-right: 10rpx;

		i {
			display: inline-block;
			background: #e9423e;
			color: #fff;
			font-weight: normal;
			font-size: 20rpx;
			line-height: 36rpx;
			padding: 0 10rpx;
			margin-right: 5rpx;
		}

		text {
			font-size: 28rpx;
		}
	}

	.ledtprei {
		float: left;

		text {
			font-size: 40rpx;
		}
	}

	.cu-modal {
		position: fixed;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		top: 0;
		display: none;
		width: 100%;
		z-index: 500;
	}

	.show {
		display: block;
	}

	.bottom-md {
		position: absolute;
		bottom: 0;
		background: #fff;
	}

	.bottom-pt {
		width: 85%;
		left: 7.5%;
		right: 7.5%;
		min-height: 300rpx;
		max-height: 600rpx;
		position: fixed;
		border-radius: 20rpx;
		bottom: 30%;
		padding: 20rpx 0 20rpx 0;
		background: #fff;
		overflow: hidden;

		.pt_bcIcon {
			width:100%;
			height:60rpx;
			margin-left: auto;
			text-align: center;
		}

		.scroll-y {
			 max-height:600rpx;
		}
	}

	.share {
		position: fixed;
		color: #ffffff;
		right: 0;
		bottom: 190rpx;
		background: linear-gradient(to bottom right, #fe726b, #fe956b);
		padding: 10rpx 10rpx 10rpx 20rpx;
		border-top-left-radius: 50px;
		border-bottom-left-radius: 50px;
		box-shadow: 0 0 20upx rgba(0, 0, 0, 0.09);
	}

	.cancel {
		width: 100vw;
		padding: 30rpx;
		text-align: center;
		background: #ffffff;
		color: #888;
		font-weight: normal;
		font-size: 30rpx;
	}

	.pt-content {
		width: 92%;
		margin: auto;
	}

	.pt_sidebar_b {
		display: flex;
		width: 33%;
		flex-wrap: wrap;
		margin-left: auto;
		color: #1A1C20;
		font-size: 24rpx;
		opacity: 1;
		margin-right: -30rpx;
	}

	.md-content {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		padding: 50rpx 0;
	}

	.md-content-item {
		margin: 0 90rpx;
		position: relative;
	}

	.md-content-item image {
		width: 100rpx;
		height: 100rpx;
		margin: auto;
	}

	.md-content-item view {
		margin-top: 15rpx;
		font-size: 28rpx;
	}

	.sharebtn {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		opacity: 0;
	}

	.md-content-item .s_bIcon {
		font-size: 72rpx;
	}

	.s_bIcon {
		width: 112rpx;
		height: 112rpx;
		color: #fff;
		font-size: 140rpx;
		margin: 60rpx auto 0;
		border-radius: 50%;
		background: #8bc37a;
		box-shadow: 0 0 12rpx rgba(0, 0, 0, 0.16);
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.s_bIcons {
		background: #ffd425;
	}

	.i_tBtn {
		width: 102rpx;
		height: 102rpx;
		background: rgba(0, 0, 0, 0.4);
		border: 1px solid #fff;
		border-radius: 50%;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 999;
	}

	.i_tbImg {
		width: 42rpx;
		height: 42rpx;
		margin: 20rpx auto 0;
	}

	.i_tbTxt {
		width: 100%;
		height: 34rpx;
		line-height: 34rpx;
		text-align: center;
		color: #fff;
		font-size: 24rpx;
		position: absolute;
		top: 58rpx;
		left: 0;
	}

	// 客服弹框
	.pouchat {
		position: fixed;
		background: rgba(0, 0, 0, 0.5);
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 9999;

		.poucont {
			position: absolute;
			top: 30%;
			left: 15%;
			right: 15%;

			.icon-close {
				width: 80rpx;
				height: 80rpx;
				font-size: 70rpx;
				color: #fff;
				line-height: 80rpx;
				text-align: center;
				margin: 30rpx auto;
			}
		}

		.chatlist {
			background: #fff;
			padding: 30rpx;
			border-radius: 10rpx;
		}

		.chatml {
			position: relative;
			padding: 20rpx;
			padding-left: 100rpx;
			min-height: 100rpx;

			.cell-service {
				position: absolute;
				right: 0;
				bottom: 0;
				left: 0;
				top: 0;
				opacity: 0;
				z-index: 10;

				.cell--bubble {
					width: 100%;
				}
			}

			text {
				display: block;
				line-height: 40rpx;
			}

			.t1 {
				font-size: 32rpx;
			}

			.t2 {
				font-size: 24rpx;
				color: #999;
			}

			image {
				width: 70rpx;
				height: 70rpx;
				position: absolute;
				left: 15rpx;
				top: 25rpx;
			}
		}
	}
</style>
